<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script src="./js/bankinfo.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
	</head>
	<body>
		<div class="mui-content cashout">
			<div class="bg-dark mui-text-center pdt-5 pdb-5 pos-relative logo-content">
				<div class="bg-dark flex flex-jc-around pdt-10 pos-relative">
					<img src="./img/arbicap_logo.png" style="height: 80px" alt="">
					<h1 style="height: 80px;line-height: 80px;" class="cl-white">阿尔卑斯</h1>
				</div>
			</div>
			<div class="bg-white pdt-10">
				<form class="mui-input-group cl-dark">
					<div class="mui-input-row mgt-5">
						<label>姓名</label>
						<input type="text" name="name" class="mui-input-clear" placeholder="请输入姓名">
					</div>
					<div class="mui-input-row mgt-5">
						<label>联系电话</label>
						<input type="text" name="tel" class="mui-input-clear" placeholder="请输入联系电话">
					</div>
					<div class="mui-input-row mgt-5">
						<label>身份证</label>
						<input type="text" name="id_card" class="mui-input-clear" placeholder="请输入身份证">
					</div>
					<div class="flex flex-jc-between">
						<label class="pd-5">退单类型</label>
						<ul class="mui-table-view mui-table-view-radio flex-1 pdl-10">
							<li value="1" class="mui-table-view-cell">
								<span value="1" class="mui-navigate-right">电子钱包</span>
							</li>
							<li value="2" class="mui-table-view-cell">
								<span value="2" class="mui-navigate-right">银行卡</span>
							</li>
						</ul>
					</div>
					<div class="mui-input-row mgt-5 bank">
						<label>银行卡</label>
						<input type="number" name="bank_num" class="mui-input-clear" placeholder="请输入银行卡">
					</div>
					<div class="mui-input-row mgt-5 bank">
						<label>开户银行</label>
						<input type="text" name="bank_name" class="mui-input-clear" placeholder="请输入开户银行">
					</div>
					<div class="mui-input-row mgt-5 bank">
						<label>开户行地址</label>
						<input type="text" name="bank_address" class="mui-input-clear" placeholder="请输入开户行地址">
					</div>
					<div class="mui-input-row mgt-5 ele_wallet">
						<label>电子钱包</label>
						<input type="text" name="ele_wallet" class="mui-input-clear" placeholder="请输入电子钱包地址">
					</div>
				</form>
				<div class="confirm">
					<button type="button" class="mui-btn bg-white w100 mgb-20 " style="margin-top: 8vh;font-size: 20px">确认</button>
				</div>

			</div>
		</div>
		<script>
			mui('.logo-content').on('click','div',function(){
				location.href = './index.html'
			})
			
			const members_id = localStorage.getItem('MEMBERS')
			let refund_type = 0

			/* 获取用户信息 */
			mui.ajax(HOST + 'v1/members-detail', {
				data: {
					members_id: members_id
				},
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(res) {
					if (res.result === 0) {
						mui('input[name="name"]')[0].value = res.data.name || ''
						mui('input[name="bank_num"]')[0].value = res.data.bank_num || ''
						mui('input[name="id_card"]')[0].value = res.data.id_card || ''
						mui('input[name="bank_address"]')[0].value = res.data.bank_address || ''
						mui('input[name="bank_name"]')[0].value = res.data.bank_name || ''
						mui('input[name="tel"]')[0].value = res.data.tel || ''
					}

				},
				error: function(xhr, type, errorThrown) {
					mui.toast(errorThrown, {
						duration: 'long',
						type: 'div'
					})
				}
			});

			/* 监听退单类型 */
			var list = document.querySelector('.mui-table-view.mui-table-view-radio');
			list.addEventListener('selected', function(e) {
				refund_type = e.detail.el.value
				if (refund_type === 1) {
					mui.each(mui('.bank'), function(index, item) {
						item.style.display = 'none'
					})
					mui.each(mui('.ele_wallet'), function(index, item) {
						item.style.display = 'block'
					})
				} else {
					mui.each(mui('.bank'), function(index, item) {
						item.style.display = 'block'
					})
					mui.each(mui('.ele_wallet'), function(index, item) {
						item.style.display = 'none'
					})
				}
			});

			/* 匹配银行名称 */
			mui('form').on('change', 'input[name="bank_num"]', function() {
				const bank_num = mui('input[name="bank_num"]')[0].value
				mui.ajax('https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=' + bank_num + '&cardBinCheck=true', {
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						getBankBin(bank_num, function(err, bankinfo) {
							if (mui('input[name="bank_name"]')[0].value) {
								mui('input[name="bank_name"]')[0].value = bankinfo ? bankinfo.bankName : ''
							}
						})
					},
					error: function(xhr, type, errorThrown) {
						mui.toast(errorThrown, {
							duration: 'long',
							type: 'div'
						})
					}
				});
			})
			mui('.confirm').on('tap', 'button', function() {
				const name = mui('input[name="name"]')[0].value
				const tel = mui('input[name="tel"]')[0].value
				const id_card = mui('input[name="id_card"]')[0].value
				const bank_num = mui('input[name="bank_num"]')[0].value
				const bank_name = mui('input[name="bank_name"]')[0].value
				const bank_address = mui('input[name="bank_address"]')[0].value
				const ele_wallet = mui('input[name="ele_wallet"]')[0].value

				if (name.length === 0) {
					mui.toast('请填写您的名字', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				const telreg = /^1[3456789]\d{9}$/
				if (tel.length === 0) {
					mui.toast('请填写您的联系电话', {
						duration: 'long',
						type: 'div'
					})
					return
				} else if (!telreg.test(tel)) {
					mui.toast('电话号码格式不正确', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				const cardreg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				if (id_card.length === 0) {
					mui.toast('请填写您的身份证', {
						duration: 'long',
						type: 'div'
					})
					return
				} else if (!cardreg.test(id_card)) {
					mui.toast('身份证号码不正确', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				if (refund_type === 1 && !bank_num) {
					mui.toast('请填写银行卡号', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				if (refund_type === 1 && !bank_num) {
					mui.toast('请填写银行卡号', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				if (refund_type === 1 && !bank_name) {
					mui.toast('请填写开户银行', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				if (refund_type === 1 && !bank_address) {
					mui.toast('请填写开户行地址', {
						duration: 'long',
						type: 'div'
					})
					return
				}
				if (refund_type === 2 && !ele_wallet) {
					mui.toast('请填写电子钱包地址', {
						duration: 'long',
						type: 'div'
					})
					return
				}

				mui.showLoading()
				mui.ajax(HOST + 'v1/refund-add', {
					data: {
						members_id: members_id,
						name: name,
						tel: tel,
						id_card: id_card,
						bank_num: bank_num,
						bank_name: bank_name,
						bank_address: bank_address,
						ele_wallet: ele_wallet,
						refund_type: refund_type
					},
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(res) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if (res.result === 0) {
							mui.hideLoading()
							mui('input[name="name"]')[0].value = ''
							mui('input[name="tel"]')[0].value = ''
							mui('input[name="id_card"]')[0].value = ''
							mui('input[name="bank_num"]')[0].value = ''
							mui('input[name="bank_name"]')[0].value = ''
							mui('input[name="bank_address"]')[0].value = ''
							mui('input[name="ele_wallet"]')[0].value = ''
							location.href = './index.html'
						} else {
							mui.toast(res.message, {
								duration: 'long',
								type: 'div'
							})
						}
					},
					error: function(xhr, type, errorThrown) {
						mui.toast(errorThrown, {
							duration: 'long',
							type: 'div'
						})
					}
				});
			})
		</script>
	</body>
</html>
